<template>
  <div class="anchor-box">
    <el-anchor container=".scrollbar" :offset="30" @click="handleClick">
      <el-anchor-link
        v-for="(item, index) in anchorData()"
        :key="index"
        :href="item.href"
        :title="item.title"
      />
      <!-- <el-anchor-link href="#表单校验" title="表单校验" />
      <el-anchor-link href="#表单自定义插槽用法" title="表单自定义插槽用法" />
      <el-anchor-link href="#api用法" title="api用法" />
      <el-anchor-link href="#columns详细用法" title="columns详细用法" />
      <el-anchor-link href="#回调函数方法" title="回调函数方法" />
      <el-anchor-link href="#插槽的使用" title="插槽的使用" /> -->
    </el-anchor>
  </div>
</template>

<script lang="ts" setup>
import { handleClickAnchor } from "@/utils";
import { useRoute } from "vue-router";
const route = useRoute();

const anchorData = computed(() => {
  return () => {
    if (route.name == "Form") {
      return formAnchorData.value;
    } else if (route.name == "Table") {
      return tableAnchorData.value;
    } else if (route.name == "Dialog") {
      return dialogAnchorData.value;
    } else if (route.name == "Empty") {
      return emptyAnchorData.value;
    } else if (route.name == "Tree") {
      return treeAnchorData.value;
    } else if (route.name == "AutoComplete") {
      return autoCompleteAnchorData.value;
    } else if (route.name == "Button") {
      return buttonAnchorData.value;
    } else if (route.name == "Upload") {
      return uploadAnchorData.value;
    } else if (route.name == "Desc") {
      return descAnchorData.value;
    } else if (route.name == "Pagination") {
      return paginationData.value;
    } else if (route.name == "Transfer") {
      return transferData.value;
    } else if (route.name == "Echarts") {
      return echartsData.value;
    }
  };
});

const formAnchorData = ref([
  { href: "#表单的基础使用", title: "表单的基础使用" },
  { href: "#表单校验", title: "表单校验" },
  { href: "#表单自定义插槽用法", title: "表单自定义插槽用法" },
  { href: "#只读表单基本用法", title: "只读表单基本用法" },
  { href: "#只读表单综合用法", title: "只读表单综合用法" },
  { href: "#api用法", title: "api用法" },
  { href: "#columns详细用法", title: "columns详细用法" },
  { href: "#回调函数方法", title: "回调函数方法" },
  { href: "#插槽的使用", title: "插槽的使用" },
]);

const tableAnchorData = ref([
  { href: "#表格的基础使用", title: "表格的基础使用" },
  { href: "#表格固定表头", title: "表格固定表头" },
  { href: "#表格流体高度", title: "表格流体高度" },
  { href: "#表格使用增删改查", title: "表格使用增删改查" },
  { href: "#表格展开搜索", title: "表格展开搜索/卡片模式" },
  { href: "#表格引用表单校验", title: "表格引用表单校验" },
  { href: "#表格开启多选框", title: "表格开启多选框" },
  { href: "#表格开启单选框", title: "表格开启单选框" },
  { href: "#自定义顺序的使用", title: "自定义顺序的使用" },
  { href: "#表格使用自定义插槽", title: "表格使用自定义插槽" },
  { href: "#api用法", title: "api用法" },
  { href: "#columns详细用法", title: "columns详细用法" },
  { href: "#回调函数方法", title: "回调函数方法" },
  { href: "#插槽的使用", title: "插槽的使用" },
]);

const dialogAnchorData = ref([
  { href: "#弹窗的使用", title: "弹窗的使用" },
  { href: "#全屏弹窗的使用", title: "全屏弹窗的使用" },
  { href: "#api用法", title: "api用法" },
  { href: "#回调函数方法", title: "回调函数方法" },
]);

const emptyAnchorData = ref([
  { href: "#空状态的基础使用", title: "空状态的基础使用" },
  { href: "#空状态的自定义插槽使用", title: "空状态的自定义插槽使用" },
  { href: "#api用法", title: "api用法" },
]);

const treeAnchorData = ref([
  { href: "#基础使用", title: "基础使用" },
  { href: "#自定义插槽使用", title: "自定义插槽使用" },
  { href: "#自定义图标使用", title: "自定义图标使用" },
  { href: "#单选功能", title: "单选功能" },
  { href: "#区域滚动使用", title: "区域滚动使用" },
  { href: "#过滤数组使用", title: "复选框/过滤数组使用" },
  { href: "#复选框全选反选使用", title: "复选框全选反选使用" },
  { href: "#api用法", title: "api用法" },
  { href: "#回调函数方法", title: "回调函数方法" },
  { href: "#slot插槽用法", title: "slot插槽用法" },
]);

const autoCompleteAnchorData = ref([
  { href: "#输入自动补全组件", title: "输入自动补全组件" },
  { href: "#输入自动补全插槽组件", title: "输入自动补全插槽组件" },
  { href: "#api用法", title: "api用法" },
  { href: "#回调函数方法", title: "回调函数方法" },
  { href: "#插槽的使用", title: "插槽的使用" },
]);

const buttonAnchorData = ref([
  { href: "#按钮的使用", title: "按钮的使用" },
  { href: "#自定义按钮颜色的使用", title: "自定义按钮颜色的使用" },
]);

const uploadAnchorData = ref([
  { href: "#上传图片的使用", title: "上传图片的使用" },
  { href: "#上传文件的使用", title: "上传文件的使用" },
  { href: "#drag上传文件的使用", title: "drag上传文件的使用" },
  { href: "#图片预览", title: "图片预览" },
]);

const descAnchorData = ref([
  { href: "#描述列表的使用", title: "描述列表的使用" },
  { href: "#描述列表插槽的使用", title: "描述列表插槽的使用" },
  { href: "#描述列表配置项的使用", title: "描述列表配置项的使用" },
  { href: "#api用法", title: "api用法" },
]);

const paginationData = ref([
  { href: "#分页的使用", title: "分页的使用" },
  { href: "#带有背景分页", title: "带有背景分页" },
  { href: "#完整功能", title: "完整功能" },
  { href: "#api用法", title: "api用法" },
  { href: "#回调函数方法", title: "回调函数方法" },
]);

const transferData = ref([
  { href: "#穿梭框的使用", title: "穿梭框的使用" },
  { href: "#可搜索过滤", title: "可搜索过滤" },
  { href: "#默认勾选", title: "默认勾选" },
  { href: "#完整功能", title: "完整功能" },
  { href: "#自定义插槽的使用", title: "自定义插槽的使用" },
  { href: "#api用法", title: "api用法" },
  { href: "#回调函数方法", title: "回调函数方法" },
  { href: "#插槽的使用", title: "插槽的使用" },
]);

const echartsData = ref([
  { href: "#柱状图示例使用", title: "柱状图示例使用" },
  { href: "#进度条示例使用", title: "进度条示例使用" },
  { href: "#饼图示例使用", title: "饼图示例使用" },
  { href: "#折线图示例使用", title: "折线图示例使用" },
]);

function handleClick(e, link) {
  handleClickAnchor(e, link);
}
</script>

<style></style>
